<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          /*
            响应式的网页设计:
                   1.移动端优先(先做移动端大小的网页)
                   2.渐进增强(再慢慢增强，变为pc端)
          */


        @media all,print{ /*可以使用多个来使用多个类型，可以使用only 来兼容老版本的浏览器*/
              body{
                  background-color: blueviolet;
              }
        }
            /*
              使用媒体查询的方法:
                   all 所有设备
                   print 打印设备
                   sreen  带屏幕的设备(手机，电脑。。。。)
                   speech  屏幕阅读器 
            */
    </style>
</head>
<body>
    <!--
           响应式布局:根据窗口大小，网页呈现不同的效果！
             使用响应式布局,可以使一个网页适应所以设备！

             (==>就是使用媒体查询，通过不同设备或者不同状态来说设置不同的样式)

    -->
</body>
</html>